import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:kugou/src/pages/listener.dart';
import 'package:kugou/src/pages/me.dart';
import 'package:kugou/src/pages/play.dart';
import 'package:kugou/src/pages/run.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PageController pageController;
  var currentPageIndex = 0;

  @override
  void initState() {
    this.pageController = PageController(initialPage: 1);
    this.pageController.addListener((){
      setState(() {
        this.currentPageIndex = this.pageController.page.toInt(); 
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    this.pageController.dispose();
    super.dispose();
  }
  
  void onHeaderTap(int index, String title, HeaderButton button) {
    this.pageController.animateToPage(index,duration: Duration(milliseconds: 300),curve: Curves.bounceIn);
  }

  @override
  Widget build(BuildContext context) {
    var decoration = BoxDecoration(
        color: Colors.lightBlue, borderRadius: BorderRadius.circular(20));
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
            title: Container(
                padding: EdgeInsets.symmetric(horizontal: 30),
                child: HeaderButtonContainer(
                  children: <HeaderButtonConfig>[
                    HeaderButtonConfig(
                      title: '我',
                      isSelected: true,
                    ),
                    HeaderButtonConfig(
                      title: '听',
                    ),
                    HeaderButtonConfig(
                      title: '玩',
                    ),
                    HeaderButtonConfig(
                      title: '跑',
                    )
                  ],
                  onHeaderButtonPress: this.onHeaderTap,
                  currentIndex: this.currentPageIndex,
                )),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () {},
              )
            ],
            //flexibleSpace:Container(color: Colors.red,),
            bottom: PreferredSize(
              child: Container(
                  height: 35,
                  padding: EdgeInsets.all(0),
                  margin: EdgeInsets.only(left: 20, right: 20, bottom: 15),
                  decoration: decoration,
                  child: TextField(
                    style: TextStyle(
                        color: Colors.white,
                        decoration: TextDecoration.underline),
                    decoration: InputDecoration(
                      border: UnderlineInputBorder(borderSide: BorderSide.none),
                      contentPadding: EdgeInsets.all(10),
                      prefixIcon: Icon(
                        Icons.search,
                        color: Colors.white,
                      ),
                      //prefixStyle: TextStyle(color: Colors.white)
                    ),
                  )),
              preferredSize: Size(0, 50),
            )),
        body: PageView(
          controller: pageController,
          scrollDirection:Axis.horizontal,
          children: <Widget>[MePage(), ListenerPage(), PlayPage(), RunPage()],
        ),
        drawer: Drawer(
          elevation: 2,
          child: Text('ssssss'),
        ),
      ),
    );
  }
}

typedef OnHeaderButtonPress = void Function(
    int index, String a, HeaderButton button);

class HeaderButtonContainer extends StatefulWidget {
  final List<HeaderButtonConfig> children;
  final OnHeaderButtonPress onHeaderButtonPress;
  int currentIndex ;
  HeaderButtonContainer({this.children, this.onHeaderButtonPress,this.currentIndex})
      : assert(children != null);

  @override
  _HeaderButtonContainerState createState() => _HeaderButtonContainerState();
}

class _HeaderButtonContainerState extends State<HeaderButtonContainer> {
  @override
  void initState() {
    this.widget.currentIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var buttons = <Widget>[];
    for (int i = 0; i < this.widget.children.length; i++) {
      var item = this.widget.children[i];
      buttons.add(HeaderButton(
          index: i,
          isSelected: this.widget.currentIndex == i,
          title: item.title,
          onTap: (index, title, target) {
            setState(() {
              this.widget.currentIndex = index;
            });
            if (this.widget.onHeaderButtonPress != null) {
              this.widget.onHeaderButtonPress(index, title, target);
            }
          },
          titleColor: item.titleColor));
    }

    return Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, children: buttons);
  }
}

class HeaderButtonConfig {
  final String title;
  final Color titleColor;
  bool isSelected;
  int index;
  HeaderButtonConfig({this.title, this.titleColor, this.isSelected});
}

class HeaderButton extends StatelessWidget {
  final String title;
  final Color titleColor;
  final OnHeaderButtonPress onTap;
  int index;
  bool isSelected;
  HeaderButton(
      {this.title,
      this.titleColor = Colors.white,
      @required this.onTap,
      this.isSelected = false,
      this.index});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        child: Text(
          title,
          style: TextStyle(color: titleColor, fontSize: isSelected ? 25 : 20),
        ),
        onTap: () {
          this.onTap(this.index, this.title, this);
        },
      ),
    );
  }
}
